How the team uses git and github for their workflow Detailed explanation

Someone named (stroong) will apply the steps in this article

In this step (stroong) will create a repository
⦁    Create a folder named (exm)
⦁    Place the mouse cursor on this folder, right-click
⦁    And choose Git Bash Here
⦁    Run the  git init command
note:The git init command is the first command you run on Git. The git init command is used to create a new repository
--------------------
Now we write the username and email of the user,

 git config --global user.name "Your Name"
 git config --global user.email "Your Email"

this helps us to identify the user. When working with a team in Git, you may need to know the name of the person who made the change, who added this file to the project, You will know what this means,

 just keep reading this article

-------------------------------------------------

Now strong will create a simple webpage

He opened the code editor and created two files named index.html and style.css in the exm folder

index.html

__________________

style.css

(stroong) will save this version of the code to the local repository, and you can refer back to this version when needed will (stroong) run

the  git status  command

git says a change has been made to the index.css file and the style.css file, but these two files are not tracked to the staging area,

The  git status  command is useful to see what is going on in the project folder. Detects if files are not tracked to the staging area Detects whether files are tracked to the staging area but not committed Detects file names that should be committed

• You may be wondering, what is a staging area:
  The staging area is where the files you specified using the  git add  command are located and these files are waiting to be taken to the local repository using the following commit

(stroong) Runs the  git add  command and will specify the index.html and style.css files to add to the staging area
 git add  index.html  style.css

• You may be wondering, what is command git add:
  In short, the  git add  command adds the specified files to the staging area
  When we want to select files from the working directory or project folder to send them to the staging area in order for us to commit to these files that were found in the staging area
  

he will now run the  git commit  command
As you can see, the commit has been created (this means that the current version of the codes for the index.html file and the style.css file is saved in the local repository)

• You may be wondering, what does commitment mean?
   git commit 
  Means saving files that are found in the staging area within the local repository
  

Focus on this image

After (stroong) saved the first version in the local repository
he will now add a simple update to its web page and he will also save the next version

(stroong) will now add an image to the webpage

he will include the img tag in the index.html file
as you see

----------------------------

he will run the  git status  command

git says there was a change in the  index.html  file and the image file is not tracked to the staging area

Now we want to commit to this version, as I told you earlier. When we want to commit or save the copy,
We must specify the files that we want to commit using the  git add  command. After that, these files become in the staging area, and when you run the  git commit  command, these files will be saved in the local repository

As shown in the picture

Now we have saved the second version in the local repository

-----------------------------

After (stroong) saved the second version in the local repository

he will now also add a soft update to its web page and he will also save the next version
he will now add social media links

as shown in the image

(stroong) will add these codes at the bottom of the codes of the index.html file

as shown

As usual, he adds his changes to the staging area and then commits

The third version has been saved in the local repository

-------------------------------------------------

After (stroong) saved all versions in the local repository
he will now run the  git log  command to see all the commits on the master branch

When the log appears using the   git log  command
you will see the number of commits where there is a date on which the commit was issued, the username of the person who did it, etc.

(stroong) wants to go back to a previous version for a specific purpose
Another meaning: to return to one of the contents of the commit

You can go back to the previous commit using the  git checkout  command

Put the hash of the commit you want to reference at the end of the  git checkout  command
As shown for example
 git checkout cb53a479b80a2a68b1ddf65dc9d556379ff105d1 

You might say where do I find the commit hash

I already told you that when you write git log it will show all commits with the hash of each commit

(stroong) returned to the second version

he will go to the index.html file to check if it has reverted to the previous version

-------------------------------------------------

-------------------------------------------------

-------------------------------------------------

but let me say something very important when we go back how we can create a feature or add several lines of code, for example in the version 2 and commit to this feature,

In this case we need to create a new branch where we save the feature we created in the version 2 into that branch,

but you can say
how we committed to previous versions without creating a branch::::: 

git comes by default with the master branch named master
Now (stroong) wants to show the number of branches so he will type  

 git branch  command

As you can see, (stroong) has one branch in his project
The  git branch  command shows the number of branches

As you can see git behind the scenes looks like this

he will now go back to the second version using the command

 git checkout  as I told you earlier

he will add the feature to this version and save this feature to the new branch
It will create a new branch named feature_n using the command
git branch feature_n
This branch will be launched from the second version
--------
As you can now see in the diagram the branch was created from the commit  ' add image in file index.html ' in the master branch 
created the feature_n branch from this commit ::::
We want to add a feature to version this commit

As you can see there are two branches

Now you have to go to the branch we just created in order to save the new feature in this branch 
To go to the new branch, type the command
 git checkout feature_n 

He will now add the feature to the second version
Define css inside the style tag between the head tag

Also, add a button as shown

The location of the button is as shown in the picture

Copy index.html file path and paste in browser url and hit Enter, As you can see on the web page

he will add the changes in the staging area and commit those changes

This part of the feature has been saved to the feature_n branch
Now he will complete the feature, he will add a list (by clicking on the button this list will appear)
This codes will be added to the index.html file

CSS

HTML

JAVASCRIPT

The order of the codes is as in the picture

Also he will save that part of the feature in the feature_n branch

Commit to changes

He wants to see how many commits there are in the feature_n branch so he will type  git log 

When we commit the change we made in Version2 in the
feature_n branch, 

git will be behind the scenes like this as
shown in the diagram
Now look at the example below ::: in the Feature_n branch there are four commits which are [A , B , D , E] 

You might say I only see two commits in the feature_n branch that are [D,E]
Good question but let's tell you something ::: Commits that came behind the commit from which the feature_n branch was created, will be within that branch As you can see in the diagram, the C commit does not exist on the feature_n branch, because C came in front of the commit from which we created the feature_n branch

But the master branch has three commits [A, B, C] in this case (stroong) now needs to merge the feature_n branch into the master branch in order to get all the commits and changes in the master branch

Now he will move to the master branch and it will merge the feature_n branch into the master branch so he will use  git merge  command

Calling this command  git merge feature_n  will merge the feature_n branch into the master branch. If there are no conflicts git will automatically create a new commit on the master branch... This commit combines all changes in the two branches from each commitment sequence

Note: The  git merge  command is used to merge branches

Now (stroong) will return to the Index.html file and this is what happened

Unfortunately, When (stroong) ran the command  git merge feature_n 
git doesn't create the commit automatically because there are conflicts in the index.html file So (stroong) has to manually resolve the conflicts and then create the commit with the final changes

When we want to merge two branches: for example

The first branch named master has a commit named H The second branch named feature_n and has a commit named S 

If the commit ( H ) contains a line or group of lines inside a  <div>  element in index.html
Also if the commit ( S ) also contains a line or group of lines inside the  <div>  element in index.html
as shown

When running the  php merge  command, git might get confused to put  <strong>  or  <p>  in the order you want it

In this case, a conflict occurs and git cannot decide which lines of code to put into the final merge, so in such a case, the merge stops and the lines of code that caused these conflicts appear with the conflict flags, <<<<<<< , =======, >>>>>>> in the index.html file

Note these tags <<<<<<<, =======, >>>>>>>> by which you will know who caused the conflict

The content between <<<<<<< HEAD and ======= This is the content of the current branch

The content between =======  and >>>>>>> feature_n This content of the feature_n branch or for the branch specified in the  git merge  command

To resolve this conflict, you should remove these tags and codes from the  index.html  file and keep the codes you want for the final result
Then we commit to the final result (codes you want)

There are two ways to merge branches in git are merge and rebase both of them serve the same purpose as they are used to merge branches but there is a difference between them

Click on the picture to see it clearly

Now you will learn how git and github can be used in a team

As team members how can we use git and github together
Making it easier for you to store your codes in the remote repository and share them with team members

You will learn how you can download a copy from a remote repository to your computer and work on it. You can add new features and new branches as well as commit and share these changes with the team by pushing them to the remote repository. You can also pull changes made by others to their branches in the remote repository and reveal what team members are doing, as well as collaborate on problems and other issues. to the warehouse owner, along with an explanation about [issues]

Now you must create two github accounts in this experiment. It is your choice. You can create more than two accounts. I will suffice with two.
(stroong) (aljhnme)

(stroong) is the team leader who created a private remote repository called illustrative-example
If you want to create a repository, click on the new button on the github homepage

When you click on this button, you will be taken directly to this page

Type the name of the repository you want and you can choose whether you want it to be private or public
After (stroong) created his own repository, he wants to send an invitation to his friend (aljhnme) to work on his repository.
You can do this steps 

as shown in the pictures

----------------------------

----------------------------

----------------------------

----------------------------

Type the username of the person you want to invite to the repository

After (stroong) wrote his friend's username and sent an invitation to his friend (aljhnme)
Within minutes, (aljhnme) received an invitation notice from (stroong)

(aljhnme) accepted the invitation and became a member of the remote repository

-----------------------------------

(stroong) will now push the local repository he was working on to his remote repository
So he will copy the repository link and copy at the end of the  git remote add  command

This command makes a connection to the specific remote repository that we want to push (changes or commits) to this repository and also pull (changes or commits) from this repository

Behind the scenes, git will store the link in origin
In this case, origin will become a shorthand for link
We can use it in many commands without writing the whole link just type origin

Note: You can change the origin name to any name you want
after that he will use the  git push  command to push the changes from the local repository to the remote repository

-----------

This command pushes all commits or changes in the master branch to the remote repository using the

 git remote add origin  command

When he types this command for the first time, the login interface will appear to him. Git will ask him to login to his Github account

(stroong) has to log in to the github account in which he created his repository (illustrative example)

Once you click on sign in with your browser button, you will be taken directly to the browser, It will automatically bind the browser's registered github account in git
Upon completion of the login, the files and contents of the local repository will be pushed to the remote repository

As you can see, we used origin in the command

 git push -u origin master 
As a shortcut to the remote repository link

As you can see, the local repository files are now in the remote repository

-----------------------------------

Also, commitments are here

You can also push specific branch changes to the remote repository
Now (stroong) will push the feature_n branch changes to the remote repository, so he will write
The command  git push origin feature_n 

The branch has been pushed to the remote repository

----------------------------

As you can see in the picture, the branch is now in the local repository

----------------------------

There are four commits in the feature_n branch

--------------------------

--------------------------

Now imagine (aljhnme) using his laptop

(aljhnme) wants to perform actions such as downloading the remote repository project belonging to the account (stroong) or pulling (changes or commits) made by the programmers in the project, and also making some changes in the local repository and pushing them to the remote repository

Now (aljhnme) will create a  folder  on the desktop named n_project in order to copy the remote repository into this folder

Place your mouse pointer on the folder and right-click and choose  git bush  here
Run the  git init  command
Then (aljhnme) will run the  git clone  command and add the remote repository link at the end of this command
In order to copy the remote repository into the n_project folder

This command is used  git clone  (to create a local repository copy) from a remote repository, This command is often used only once when the programmer wants to download the remote repository in order to perform a task such as creating updates in the lines of code, adding files to this repository, which has become local, and then pushing these changes to the remote repository 

When (aljhnme) uses the  git clone  command for the first time
git will ask (aljhnme) to login to his github account in git, now (aljhnme) has to enter his account which (stroong) gave him access to his repository

(aljhnme) wants to add a small change to the index.html file in the ( stroong ) account's remote repository.

But before merging the changes into this repository, (aljhnme)  may want to show the changes to the owner of this repository to confirm whether the changes fit the owner's requirements.

In this case ( aljhnme ) has to create a copy of this repository where he can work on this copy and write the code and do everything without affecting the  original repository  but he can create a  pull request 

You can create a copy of this repository by clicking Fork 

When you click  Fork , as you can see, a copy of (stroong's) repository is created, in (aljhnme) account

#################

Let me tell you something important. There is a relationship between the copy repository (aljhnme) and the original repository. When you add a file or make a change in the original repository, you can fetch updates to the repository you copied by synchronizing the fork with the original repository.

Now (aljhnme) wants to add a line of code to the index.html file in the repository that he copied

After saving this simple change in the index.html file

( pull request  means showing the changes made by (aljhnme) for the original repository owner to see before merging them into the repository, then repository owner (stroong) can agree to merge this changes into his repository, or decline)

This helps us a lot to avoid mistakes that programmers go through while merging changes 

When you click on new  pull request , the change made by (aljhnme) will appear in the index.html file in the repository you copied

---------------
---------------

Now (aljhnme) will send the pull request changes to (stroong)

He will write something about the change he made

Your  pull request  is ready for (stroong) to see

-----------------------
-----------------------
 found a pull request

(stroong) agreed to merge the changes into his repository

As you can see

Note: As long as (aljhnme) is a member of the remote repository that belongs to (stroong's) account, (aljhnme) can submit changes and merge them directly into the remote repository without a pull request.

But this is not suitable for some team members, because when merging changes directly without reviewing them, this may cause problems in the codes

----------------------
----------------------

(aljhnme) implements this with the following steps

he will add a line of code to the index.html file in its local repository

The (aljhnme) will now commit to this simple change

He wants to push this change to the remote repository belonging to (stroong's) account using the  git push  command

You know that  git push  pushes changes to a remote repository

Push fails because ::Git gives us a warning where itsays that there are changes in the branch of the remote repository that are not present in the branch of the local repository because if we force push then the content of the remote repository will be replaced by the content of the local repository and therefore new changes in the remote repository will be deleted
In this case, we will be in big trouble, so we have to be careful when using  git push 

This pictures shows you the cause of the problem

index.html file in the remote repository

################

index.html file in the local repository

A line of code exists in the remote repository but does not exist in the local repository. 
This is why push fails
To solve this problem: we have to pull the new changes which are in the remote repository and merge them into the local repository using this command

 git pull - rebase original name_branch

After that (aljhnme) can push changes without any restrictions
As you can see now  (aljhnme) pulls all changes or new commits from the remote repository and automatically merges them into the local repository

Notice the new commits that became in the local repository that belongs to (aljhnme)

As long as (aljhnme) pulls the new changes to his local repository, he can now push the changes he made in his repository to the remote repository without restrictions

Changes made by (aljhnme) in his local repository are pushed to (stroong's) remote repository.

This screenshot is from the index.html file located in the remote repository

#####################
#####################

As you can see, the line of code (aljhnme) wrote in the local repository has been pushed to the remote repository

-----------------------------------
-----------------------------------
I'm going to talk about a useful tool in GitHub which is (Issues) which is a dialog box that the team uses to track their work and through which they can work smoothly by talking about their problems that they encounter during development and also create a list of tasks, in addition to creating notes on other matters

When you click on a new issue, you can comment on a specific issue, give orders, or predict something

Now stroong will write a comment about a problem, saying there is a code problem in the index.html file
When finished commenting, he will click on the submit new issues button

The comment is now visible in the (Issues) box. (aljhnme) can see this comment, check the index.html file in the remote repository

Also (aljhnme) can reply to the comment

As I mentioned above, issues are used for many cases

Let me explain one, the most important:
For example, when (aljhnme) makes a change in the repository that he copied and wants to create a pull request to the original repository,,
If the repository owner (stroong) reviews a pull request and finds a problem or deficiency in the code made by (aljhnme)
In this case, (stroong) will write a comment about the problem in [ issues ] addressed to (aljhnme)